<template>
  <div class="form-menu-selector">
    <div class="form-menu-selector-app-list">
      <div class="form-menu-selector-title">应用</div>
      <div v-for="app in apps" @click="() => appId = app.id"
           :key="app.id" :class="['form-menu-selector-app-item', {
             'form-menu-selector-app-item-selected': appId === app.id}]">
        {{ app.appName }}
        <span class="iconfont">&#xe90f;</span>
      </div>
    </div>

    <div v-if="appId && forms && forms.length" class="form-menu-selector-form-list">
      <div class="form-menu-selector-title">表单</div>
      <div v-for="form in forms" @click="() => formId = form.id"
           :key="form.id" :class="['form-menu-selector-app-item', {
             'form-menu-selector-app-item-selected': formId === form.id}]">
        {{ form.formName }}
        <span class="iconfont">&#xe90f;</span>
      </div>
    </div>

    <div v-if="appId && forms && forms.length && formId && menus && menus.length"
         class="form-menu-selector-menu-list">
      <div class="form-menu-selector-title">菜单</div>
      <div v-for="menu in menus" @click="() => changeMenu(menu)"
           :key="menu.id" :class="['form-menu-selector-menu', {
             'form-menu-selector-menu-selected': formMenuId === menu.id}]">
        {{ menu.menuName }}
      </div>
    </div>
  </div>
</template>
<script>
import {createModelForVue, createProps} from '@/utils';
import {getAction} from '@api/manage';

export default {
  name: 'FormMenuSelector',
  model: createModelForVue('formMenuId'),
  props: {
    formMenuId: createProps(String),
  },
  data() {
    return {
      appId: undefined,
      formId: undefined,
      apps: [],
      forms: [],
      menus: [],
    };
  },
  mounted() {
    this.loadAppList();
  },
  methods: {
    changeMenu(menu) {
      this.$emit('change', menu.id);
      this.$emit('update:title', menu.menuName);
    },
    loadMenus() {
      if (!this.formId) return;
      this.loading = true;
      getAction('/form/designFormMenu/list', {pageSize: 10000, form_id: this.formId}).then(data => {
        if (data.success) {
          this.menus = data.result.records;
        } else {
          this.$notification.error({message: data.message, duration: 3});
        }
        this.loading = false;
      }).catch(error => {
        console.log(error);
        this.loading = false;
        this.$notification.error({message: error && error.response && error.response.data.message || error.response.statusText, duration: 3});

      });
    },
    loadAppList() {
      this.loading = true;
      getAction('/form/designAppDefinition/list', {pageSize: 10000}).then(data => {
        if (data.success) {
          this.apps = data.result.records;
        } else {
          this.$notification.error({message: data.message, duration: 3});
        }
        this.loading = false;
      }).catch(error => {
        console.log(error);
        this.loading = false;
        this.$notification.error({message: error && error.response && error.response.data.message || error.response.statusText, duration: 3});

      });
    },
    loadForms() {
      if (!this.appId) return;
      this.loading = true;
      getAction('/form/designFormDefinition/list', {pageSize: 10000, app_id: this.appId, form_main: 1}).then(data => {
        if (data.success) {
          this.forms = data.result.records;
        } else {
          this.$notification.error({message: data.message, duration: 3});
        }
        this.loading = false;
      }).catch(error => {
        console.log(error);
        this.loading = false;
        this.$notification.error({message: error && error.response && error.response.data.message || error.response.statusText, duration: 3});

      });
    },
  },
  watch: {
    appId: {
      handler() {
        this.formId = undefined;
        this.$emit('change', undefined);
        this.loadForms();
      },
      immediate: true,
    },
    formId: {
      handler() {
        this.$emit('change', undefined);
        this.loadMenus();
      },
      immediate: true,
    }
  }
};
</script>
<style>
.form-menu-selector {
  width: 100%;
  height: 100%;
  border: 1px solid #eaeaea;
  border-radius: 4px;
  display: flex;
}

.form-menu-selector-app-list {
  height: 100%;
  width: fit-content;
  overflow: auto;
  border-right: 1px solid #eaeaea;
}

.form-menu-selector-app-item {
  padding: 5px 10px 5px 10px;
  text-align: right;
  max-width: 250px;
  user-select: none;
  cursor: pointer;
  min-width: 150px;
}

.form-menu-selector-form-list {
  border-right: 1px solid #eaeaea;
}

.form-menu-selector-app-item-selected {
  font-weight: bolder;
}

.form-menu-selector-menu-selected .iconfont,
.form-menu-selector-menu-selected {
  background: #e6f6ff;
  color: #1890ff
}

.form-menu-selector-menu {
  padding: 5px 10px 5px 10px;
  text-align: right;
  user-select: none;
  cursor: pointer;
  min-width: 150px;
}

.form-menu-selector-menu-list {
  flex: 1;
}

.form-menu-selector-title {
  user-select: none;
  font-weight: bolder;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-bottom: 1px solid #eaeaea;
  background: #f5f5f5;
}
</style>